<template>
  <chart :option="commonOption" v-bind="$attrs"></chart>
</template>

<script>
export default {
  name: "DoughnutChart",
  props: ["title", "seriesName", "data", "textColor"],
  data() {
    return {
      commonOption: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        title: {
          text: "",
          x: "center",
          y: "center",
          textStyle: {
            color: this.textColor,
            fontSize: 16
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            data: null
          }
        ]
      }
    };
  },
  created() {
    this.commonOption.title.text = this.title;
    this.commonOption.series[0].name = this.seriesName;
    this.commonOption.series[0].data = this.data;
  }
};
</script>

<style scoped></style>
